<template>
  <div class="simple-analyse memorandumSaleAnalysisContainer">
    <div class="saleAnalysisItem buttonContainer">
      <el-button style="font-weight: bold" size="mini" type="info" @click="getPdf()">生成PDF</el-button>
      <el-button style="font-weight: bold" size="mini" type="primary" @click="createSummary" icon="el-icon-plus">总结</el-button>
    </div>
    <div id="pdfDom">
      <div class="saleAnalysisItem boederSet">
        <div class="titleHeader">目标及完成情况</div>
        <div class="analysisItemContent flex-container completeContainer" v-if="kpiListSet.length > 0">
          <div class="completeItem" v-for="(item,index) in kpiListSet" :key="index">
            <div class="completeItemContainer">
              <el-progress-mine :elProgressColor="item ? item.colorName : ''"
                                :elProgressTitle="item ? item.kpiName : ''"
                                :elProgressInner="item ? item.kpiActualValue : 0"
                                :elProgressOuter="item ? item.kpiExpectValue : 0"></el-progress-mine>
            </div>
          </div>
        </div>
        <div class="analysisItemContent flex-container" v-else style="height: 84px;justify-content: center;">
          暂无数据
        </div>
      </div>
      <div class="saleAnalysisItem boederSet">
        <div class="titleHeader">购买人群分析</div>
        <div class="analysisItemContent buyingCrowds">
          <div class="buyingCrowdsItem buyingCrowdsTitle">
            <div class="buyingTitle"><span class="leftSet">总流量:</span><span style="color: #ffbf13;font-weight:bold;" v-text="simpleMeta.tTrialSalePointData ? simpleMeta.tTrialSalePointData.flowCount : 0 "></span><span style="font-weight:bold;">人</span></div>
            <div class="buyingTitle"><span class="leftSet">已购人数:</span><span  style="color:#ffbf13;font-weight:bold;" v-text="simpleMeta.tTrialSalePointData ? simpleMeta.tTrialSalePointData.purchaseNumber : 0 "></span><span style="font-weight:bold;">人</span></div>
            <div class="buyingTitle"><span class="leftSet">未购人数:</span><span  style="color: #ffbf13;font-weight:bold;" v-text="simpleMeta.tTrialSalePointData ? simpleMeta.tTrialSalePointData.noPurchaseNumber : 0 "></span><span style="font-weight:bold;">人</span></div>
          </div>
          <div class="buyingCrowdsItem buyingCrowdsItemEcharts flex-container">
            <div class="itemEcharts">
              <div class="itemEchartsContainer" id="itemEchartsAge" ref="itemEchartsAge" style="height: 250px;"></div>
            </div>
            <div class="itemEcharts">
              <div class="itemEchartsContainer" id="itemEchartsIncome" ref="itemEchartsIncome" style="height: 250px;"></div>
            </div>
            <div class="itemEcharts">
              <div class="itemEchartsContainer" id="itemEchartsSex" ref="itemEchartsSex" style="height: 250px;"></div>
            </div>
            <div class="itemEcharts">
              <div class="itemEchartsContainer" id="itemEchartsEdution" ref="itemEchartsEdution" style="height: 250px;"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="saleAnalysisItem boederSet">
        <div class="titleHeader">问题分析</div>
        <div class="analysisItemContent problemAnalysis">
          <div class="problemAnalysis flex-container" v-show="simpleMeta.feedbackNumList">
            <div class="problemAnalysisItem">
              <div id="classifyEcharts" ref="classifyEcharts" style="height: 360px;width: 100%;"></div>
              <div class="problemEchartsTitle classifyEchartsTitle">问题归类情况</div>
            </div>
          </div>
        </div>
      </div>
      <div class="saleAnalysisItem boederSet">
        <div class="titleHeader space-between">
          <div class="titleHeaderItem">总结</div>
          <div class="titleHeaderItem">
            <el-radio-group class="mineSetRadio" v-model="radioSwitchSummaty" size="small">
              <el-radio-button label="0">完成度分析</el-radio-button>
              <el-radio-button label="1">物料分析</el-radio-button>
              <el-radio-button label="2">问题总结</el-radio-button>
              <el-radio-button label="3">建议</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <!--   v-if="simpleMeta.activitySummary" -->
        <div class="analysisItemContent summarize">
          <div class="summarizeItem" v-show="radioSwitchSummaty == 0">
            <el-input class="mineSetText" type="textarea" :autosize="{ minRows: 2, maxRows: 6}"
                      disabled v-model="simpleMeta.activitySummary.completionAnalysis">
            </el-input>
          </div>
          <div class="summarizeItem" v-show="radioSwitchSummaty == 1">
            <el-input class="mineSetText" type="textarea" :autosize="{ minRows: 2, maxRows: 6}"
                      disabled v-model="simpleMeta.activitySummary.informationAnalysis">
            </el-input>
          </div>
          <div class="summarizeItem" v-show="radioSwitchSummaty == 2">
            <el-input class="mineSetText" type="textarea" :autosize="{ minRows: 2, maxRows: 6}"
                      disabled v-model="simpleMeta.activitySummary.summary">
            </el-input>
          </div>
          <div class="summarizeItem" v-show="radioSwitchSummaty == 3">
            <el-input class="mineSetText" type="textarea" :autosize="{ minRows: 2, maxRows: 6}"
                      disabled v-model="simpleMeta.activitySummary.suggestion">
            </el-input>
          </div>
        </div>
      </div>
    </div>
    <!--  总结Dialog容器-->
    <div class="summaryDialog">
      <el-dialog
        class="mineSetDialog dialogHeaderFont"
        title="总结"
        :visible.sync="createSumdialogVisible"
        top="10vh"
        width="50%">
        <div class="summaryContainer whiteContainer paddingSet boederSet">
          <div class="summaryItem">
            <div class="summaryPart summaryPartLeft">完成度分析</div>
            <div class="summaryPart summaryPartRight">
              <el-input
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 6 }"
                v-model="trialSaleSummary.completionAnalysis"
                placeholder="请输入完成度分析">
              </el-input>
            </div>
          </div>
          <div class="summaryItem">
            <div class="summaryPart summaryPartLeft">物料分析</div>
            <div class="summaryPart summaryPartRight">
              <el-input
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 6 }"
                v-model="trialSaleSummary.informationAnalysis"
                placeholder="请输入物料分析">
              </el-input>
            </div>
          </div>
          <div class="summaryItem">
            <div class="summaryPart summaryPartLeft">问题总结</div>
            <div class="summaryPart summaryPartRight">
              <el-input
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 6 }"
                v-model="trialSaleSummary.summary"
                placeholder="请输入问题总结">
              </el-input>
            </div>
          </div>
          <div class="summaryItem">
            <div class="summaryPart summaryPartLeft">建议</div>
            <div class="summaryPart summaryPartRight">
              <el-input
                type="textarea"
                :autosize="{ minRows: 3, maxRows: 6 }"
                v-model="trialSaleSummary.suggestion"
                placeholder="请输入建议">
              </el-input>
            </div>
          </div>
        </div>
        <div class="summaryFooter">
          <div class="sureOrCancel">
            <el-button style="width: 100px;" @click="saveSaleSummary" size="small" type="primary" plain>确 定</el-button>
            <el-button style="width: 100px;" @click="cancelSaleSummary" size="small" plain>取 消</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import ElProgressMine from 'router/marketSale/compentSet/ElProgressMine/el-progress-mine'
  import * as opreate from 'api/getData'

  export default {
    name: "simple-analyse",
    props:{
      simpleMeta:{
        type: Object,
        required: true,
        default(){
          return {}
        }
      }
    },
    components:{
      ElProgressMine
    },
    data() {
      return {
        htmlTitle:'数据分析',
        radioSwitchSummaty: '0',
        createSumdialogVisible: false,
        trialSaleSummary: {},
        noneStyle: 'none'
      }
    },
    computed:{
      kpiListSet(){
        let tempSet = this.simpleMeta.kpiList
          ? this.simpleMeta.kpiList.filter( v => v.kpiActualValue != null)
          :[]
        return  tempSet
      }
    },
    mounted() {
      console.log('====', this.simpleMeta.buyingcCrowdsAnalysList)
      this.initCircleEcharts(this.simpleMeta.buyingcCrowdsAnalysList)
      this.initProblemEcharts(this.simpleMeta.feedbackNumList)
    },
    methods: {
      createSummary(){
        opreate.getTrialSaleSummary(this.simpleMeta).then(res => {
          this.trialSaleSummary = res.data || {}
          this.createSumdialogVisible = true
        }).catch(err => {
          this.createSumdialogVisible = true
        })
      },
      initCircleEcharts(buyingcCrowdsAnalysList = []){
        let itemEchartsAge = this.$echarts.init(this.$refs.itemEchartsAge)
        itemEchartsAge.clear()
        let itemEchartsIncome =this.$echarts.init(this.$refs.itemEchartsIncome)
        itemEchartsIncome.clear()
        let itemEchartsSex =this.$echarts.init(this.$refs.itemEchartsSex)
        itemEchartsSex.clear()
        let itemEchartsEdu =this.$echarts.init(this.$refs.itemEchartsEdution)
        itemEchartsEdu.clear()
        let tempMap = [itemEchartsAge,itemEchartsIncome,itemEchartsSex,itemEchartsEdu]
        for (let idx in buyingcCrowdsAnalysList){
          console.log('idx1', tempMap[idx]);
          console.log('idx2', this.initSetEcharts(buyingcCrowdsAnalysList[idx]));
          tempMap[idx].setOption(this.initSetEcharts(buyingcCrowdsAnalysList[idx],'人'))
        }
      },
      initProblemEcharts(feedbackNumList){
        let classifyEcharts = this.$echarts.init(this.$refs.classifyEcharts)
        if(feedbackNumList){
          let option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross'
              }
            },
            grid: {
              left: '18%',
              top: '12%'
            },
            yAxis: [{
              axisTick: {
                show: false
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                fontSize: 14
              },
              type: 'category',
              position: 'left',
              data: feedbackNumList.map(v => v.problemType)
            }],
            xAxis: [{
              show: false,
              axisTick: {
                show: false
              },
              type: 'value',
              name: '问题归类情况',
              axisLine: {
                show: false,
              }
            }],
            series: [{
              name: '统计数',
              align: 'left',
              type: 'bar',
              itemStyle: {
                normal: {
                }
              },
              barWidth: '17',
              label: {
                normal: {
                  show: true,
                  position: 'right',
                  textStyle: {
                    color: '#969cd6'
                  }
                }
              },
              data: feedbackNumList.map(v => v.countNum)
            }]
          }
          classifyEcharts.setOption(option)
        }else {
          classifyEcharts.clear()
        }
      },
      initSetEcharts( metaSet = {}, paramSet = "", mineSet = "" ){
        metaSet = metaSet || {}
        let unitSet = metaSet.crowdType.includes('年龄') ? '岁' : ''
        let buyingcCrowdsNaVl = metaSet.buyingcCrowdsNaVl || []
        let optionSet = {
          title:{
            text: metaSet.crowdType,
            x:'center',
            bottom: 0,
            textStyle:{
              fontSize: '14'
            }
          },
          series : [
            {
              name: metaSet.crowdType,
              type: 'pie',
              radius : '35%',
              minAngle: 6,
              avoidLabelOverlap: true,
              center: ['50%', '40%'],
              data: buyingcCrowdsNaVl.map(v => {
                return { value: v.value, name: v.name==='65以上'?`${v.name}`:`${v.name}${unitSet}` }
              }),
              itemStyle: {
                normal:{
                  label: {
                    show: true,
                    position: 'outside',
                    color: '#ddd',
                    formatter: function(params) {
                      return '{white|' + params.name + mineSet + '}' + '\n{white|' + params.value + paramSet + '}';
                    },
                    rich: {
                      white: {
                        align: 'center'
                      }
                    }
                  },
                },
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
        return optionSet
      },
      saveSaleSummary(){
        let { completionAnalysis,informationAnalysis,summary,suggestion } = this.trialSaleSummary
        if(Object.keys({ completionAnalysis,informationAnalysis,summary,suggestion }).some(v => this.trialSaleSummary[v] == "")){
          this.$message.error('请填写全部信息')
          return
        }else {
          let { activityId, productId } = this.simpleMeta
          opreate.saveTrialSaleSummary(Object.assign(this.trialSaleSummary,{ activityId, productId })).then(res => {
            if(res.data){
              this.$message.success('保存成功')
              this.simpleMeta.activitySummary = { completionAnalysis,informationAnalysis,summary,suggestion }
              this.createSumdialogVisible = false
            }else {
              this.$message.error('错了哦，请稍后再试')
            }
          }).catch(err => {
            this.$message.error('错了哦，请稍后再试')
          })
        }
      },
      cancelSaleSummary(){
        this.createSumdialogVisible = false
      }
    },
    watch:{
      simpleMeta:{
        deep:true,
        handler(newVal) {
          this.initProblemEcharts(newVal.feedbackNumList)
          this.initCircleEcharts(newVal.buyingcCrowdsAnalysList)
        }
      }
    }
  }
</script>

<style scoped>
  .saleAnalysisItem+ .saleAnalysisItem{
    margin-top: 12px;
  }
  .completeItem{
    flex: 1;
  }
  .buttonContainer{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
  }
  .completeItemContainer{
    padding: 12px 20px;
    display: flex;
  }

  /**
  * @desc: This is Note
  * 购买人群CSS
  * @author: WJ
  * @date: 2018/10/24 19:28:13
  */
  .buyingCrowds{
    display: flex;
    flex-direction: column;
  }
  .buyingCrowdsTitle{
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0px 20px;
  }
  .buyingTitle+ .buyingTitle{
    margin-left: 12px;
  }
  .leftSet{
    margin-right: 6px;
    font-weight: bold;
  }
  .buyingCrowdsItemEcharts{
    display: flex;
  }
  .itemEcharts{
    flex: 1;
    display: flex;
    width: 25%;
  }
  .itemEcharts{
    padding: 12px 0px;
  }
  .itemEchartsContainer{
    width: 100%;
  }
  .itemEcharts+ .itemEcharts .itemEchartsContainer{
    border-left: 1px solid #E0E8EF;
  }

  /**
  * @desc: This is Note
  * 问题分析
  * @author: WJ
  * @date: 2018/10/24 21:25:08
  */
  .problemAnalysisItem{
    display: flex;
    flex: 1;
    flex-direction: column;
  }
  .problemEchartsTitle{
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 6px;
  }

  /**
  * @desc: This is Note
  * 总结CSS
  * @author: coulis
  * @date: 2018/10/25 09:14:48
  */
  .summarize{
    padding: 6px 0px;
  }

  /**
  * @desc: This is Note
  * 新建总结CSS
  * @author: WJ
  * @date: 2018/11/08 16:03:10
  **/
  .summaryContainer{
    display: flex;
    flex-direction: column;
  }
  .summaryItem{
    display: flex;
  }
  .summaryItem+ .summaryItem{
    margin-top: 12px;
  }
  .summaryPartLeft{
    width: 92px;
    padding-right: 12px;
    display: flex;
    justify-content: flex-end;
  }
  .summaryPartRight{
    display: flex;
    flex: 1;
  }
  .summaryFooter{
    display: flex;
    justify-content: center;
    margin-top: 12px;
  }
  .sureOrCancel{
    display: flex;
    justify-content: space-between;
    width: 40%;
  }
  .titleHeader{
    font-weight:bold;
  }
</style>
